<%--
  Created by IntelliJ IDEA.
  User: 20064
  Date: 2020/2/12
  Time: 13:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="./space/js/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <style type="text/css">
        * {
            -webkit-user-select: none;
        }

        .move1 {
             left: 200px;
             top: 100px;
             border: 1px red solid;
             position: absolute;
         }

        .move2 {

            border: 1px red solid;
            position: absolute;
        }

    </style>

</head>
<body>
<div class="move1 shadow" id="move1">
    <div class="card">
        <div class="card-header">
            卡片头
        </div>
        <div class="card-body">
            卡片内容
        </div>
    </div>
</div>

<div class="move2 shadow" id="move2">
    <div class="card">
        <div class="card-header">
            卡片头
        </div>
        <div class="card-body">
            卡片内容
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="./space/js/jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./space/js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    move(".move1");
    move(".move2");

    function move(divId) {
        var checkMove = false;
        var divMouseX = 0;
        var divMouseY = 0;
        $(divId).mousedown(function (e) {
            checkMove = true;
            divMouseX = e.pageX - $(divId).offset().left;
            divMouseY = e.pageY - $(divId).offset().top;
        });
        $(divId).mouseup(function () {
            checkMove = false;
        });
        $(document).mousemove(function (e) {
            if (checkMove) {
                var x = e.pageX - divMouseX;
                var y = e.pageY - divMouseY;
                if (x < 0) {
                    x = 0;
                }
                if (y < 0) {
                    y = 0;
                }
                $(divId).css({
                    left: x,
                    top: y
                });
            }
        });
    }

</script>
</html>
